<template>
	<view class="empty">
		<view class="empty__content">
			<image :src="iconSrc || icon[mode]" :style="{width: `${iconSize}rpx`, height: `${iconSize}rpx`}"/>
			<text :style="{color: color, fontSize: `${fontSize}rpx`}">
			    {{ text || textEnum[mode] || '空空如也' }}
			</text>
		</view>
		<view v-if="show" class="empty__btn" @click="$emit('onClick')">
			{{ btnText || btnTextEnum[mode] || '查看' }}
		</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive } from 'vue';
	import dataIcon from './images/data.png';
	import pageIcon from './images/page.png';
	import orderIcon from './images/order.png';
	import searchIcon from './images/search.png';
	import historyIcon from './images/history.png';
	import couponIcon from './images/coupon.png';
	import messageIcon from './images/message.png';
	
	type Mode = 'data' | 'page' | 'order' | 'search' | 'history' | 'coupon' | 'message';
	
	interface Props {
		mode: Mode,
		iconSrc: string,
		text: string,
		color: string,
		fontSize: number,
		iconSize: number,
		show: boolean,
		btnText: string
	}
	
	withDefaults(defineProps<Props>(), {
		mode: 'data',
		color: '#c0c4cc',
		fontSize: 30,
		iconSize: 400,
		show: true,
	});
	
	const icon = reactive({
		'data': dataIcon,
		'page': pageIcon,
		'order': orderIcon,
		'search': searchIcon,
		'history': historyIcon,
		'coupon': couponIcon,
		'message': messageIcon,
	});
	const textEnum = reactive({
		'data': '暂无数据',
		'page': '页面不存在',
		'order': '购物车为空',
		'search': '没有搜索结果',
		'history': '无历史记录',
		'coupon': '没有优惠卷',
		'message': '消息列表为空',
	});
	const btnTextEnum = reactive({
		'data': '刷新',
		'page': '刷新',
		'order': '去逛逛',
		'search': '刷新',
		'history': '刷新',
		'coupon': '去领取',
		'message': '刷新',
	});
</script>

<style scoped lang="scss">
	.empty{
		padding: 50rpx 20rpx;
		display: flex;
		flex-direction: column;
	    align-items: center;
		justify-content: center;
		&__content{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			& > text{
				margin-top: 20rpx;
				letter-spacing: 2rpx;
			}
		}
		&__btn{
			max-width: 70%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			color: #fff;
			padding: 15rpx 30rpx;
			margin-top: 30rpx;
			border-radius: 10rpx;
			background-color: #2b85e4;
		}
	}

</style>